<template>
  <el-dialog
    title="组管理"
    custom-class="distribution-dialog"
    :close-on-click-modal="false"
    :modal="false"
    :visible.sync="groupDialog"
    :before-close="handleClose"
  >
    <div slot="title" style="color:white;text-align:center">
      <span>{{$t('m.GROUP_MANAGEMENT')}}</span>
    </div>
    <el-container style="height:100%">
      <el-aside width="30px" class="aside">
        <div
          :class="titleNum == 1?'aside-part checked ':'aside-part'"
          @click="handleGoto('1')"
        >{{$t('m.ADDRESS_BOOK_GROUPING')}}</div>
        <div style=" height: 10%;"></div>
        <!-- <div :class="titleNum == 2?'aside-part checked ':'aside-part'" @click="handleGoto('2')">视频分组</div> -->
      </el-aside>
      <el-container>
        <el-header style="height:10%">
          <el-input
            :placeholder="$t('m.tip.PLEASE_ENTER_CONTENT')"
            v-model="searchKey"
            class="search-input"
            size="small"
            autocomplete
            @blur="treeGroupFilter"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-header>
        <el-container style="height:90%">
          <el-aside class="aside-left">
            <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap">
              <el-tree
                v-if="titleNum == 1"
                :data="treeData"
                icon-class="el-icon-arrow-right"
                node-key="nid"
                highlight-current
                @node-click="nodeClick"
                :filter-node-method="filterNode"
                ref="tree"
              ></el-tree>
              <el-tree
                v-show="titleNum == 2"
                :data="treeDataVideo"
                icon-class="el-icon-arrow-right"
                node-key="nid"
                highlight-current
                @node-click="nodeClick"
                :filter-node-method="videoGroupFilter"
                ref="videoTree"
              ></el-tree>
            </el-scrollbar>
          </el-aside>
          <el-main>
            <el-table
              :data="tableData"
              cell-class-name="table-cell-custom"
              header-cell-class-name="table-herder-custom"
              highlight-current-row
              size="small"
              style="width: 100%"
              height="100%"
              ref="table"
            >
              <el-table-column width="55" type="selection" align="center"></el-table-column>
              <!-- 通讯录分组显示 -->
              <el-table-column
                width="130"
                :label="$t('m.GROUP_FULL_NAME')"
                show-overflow-tooltip
                align="center"
                v-if="titleNum == 1"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.fullName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                width="200"
                :label="$t('m.GROUP_NAME_FOR_SHORT')"
                show-overflow-tooltip
                align="center"
                v-if="titleNum == 1"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.groupName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.GROUP_TYPE')"
                show-overflow-tooltip
                align="center"
                v-if="titleNum == 1"
              >
                <template slot-scope="scope">
                  <span>{{ $t('m.dict.groupType')[scope.row.groupType] }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column :label="$t('m.KEY_VALUE')" align="center" v-if="titleNum == 1">
                <template slot-scope="scope">
                  <span>{{ scope.row }}</span>
                </template>
              </el-table-column>-->
              <!-- 视频分组显示 -->
              <el-table-column label="备注" align="center" v-if="titleNum == 2">
                <template slot-scope="scope">
                  <span>{{ scope.row.remark }}</span>
                </template>
              </el-table-column>
              <el-table-column label="组名称" align="center" v-if="titleNum == 2">
                <template slot-scope="scope">
                  <span>{{ scope.row.groupName }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <img
                    style="cursor: pointer;width:22px"
                    src="../../assets/images/Edit_Hover.png"
                    @click="handleModify(scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
    <div slot="footer" class="dialog-footer">
      <div style="float:right">
        <el-button @click="handleAdd()" size="small">{{$t('m.ADD')}}</el-button>
        <el-button @click="handledel()" size="small">{{$t('m.DELECT')}}</el-button>
      </div>
    </div>
    <!-- 新增界面 -->
    <el-dialog
      title="组管理"
      custom-class="inner-dialog"
      :close-on-click-modal="false"
      :modal="false"
      :visible.sync="dialogAdd"
      :before-close="handleAddClose"
      width="100%"
    >
      <div slot="title" style="color:white;text-align:center">
        <span>{{$t('m.GROUP_MANAGEMENT')}}</span>
      </div>
      <svg-icon class="back-to-list" icon-class="back" @click="dialogAdd = false"></svg-icon>
      <div style="height:360px">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height:100%;">
          <el-form ref="form" :model="form" label-width="130px" hide-required-asterisk>
            <el-form-item
              prop="fullName"
              :label="$t('m.GROUP_FULL_NAME')"
              v-if="titleNum == 1"
              :rules="[
      { required: true, message:$t('m.GROUP_FULL_NAME') + $t('m.tip.CAN_NOT_BE_EMPTY') , trigger: 'blur' },]"
            >
              <el-input v-model="form.fullName" size="small"></el-input>
            </el-form-item>
            <el-form-item
              prop="groupName"
              :label="$t('m.GROUP_NAME_FOR_SHORT')"
              v-if="titleNum == 1"
              :rules="[
      { required: true, message: $t('m.GROUP_NAME_FOR_SHORT') + $t('m.tip.CAN_NOT_BE_EMPTY'), trigger: 'blur' },]"
            >
              <el-input v-model="form.groupName" size="small"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('m.PARENT_GROUP')"
              v-if="titleNum == 1"
              :rules="[
      { required: true, message: $t('m.tip.PLEASE_SELECT') + $t('m.PARENT_GROUP'), trigger: 'blur' },]"
            >
              <el-input
                @click.native="showTree = true"
                v-model="form.parentGroupName"
                suffix-icon="el-icon-zoom-in"
              />
            </el-form-item>
            <el-form-item
              :label="$t('m.GROUP_TYPE')"
              v-if="titleNum == 1"
              prop="groupType"
              :rules="[ { required: true, message: $t('m.tip.PLEASE_SELECT') + $t('m.GROUP_TYPE'), trigger: 'change' },]"
            >
              <el-select
                v-model="form.groupType"
                :placeholder="$t('m.tip.PLEASE_SELECT')"
                popper-class="default-select-popper"
                style="width:100%"
              >
                <el-option
                  v-for="(item) in groupTypeMap"
                  :key="item.key"
                  :label="$t('m.dict.groupType')[item.key]"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('m.KEY_VALUE')" v-if="titleNum == 1">
              <el-input size="small" v-model="form.keyNumber"></el-input>
            </el-form-item>
            <el-form-item
              label="组名称："
              v-if="titleNum == 2"
              :rules="[
      { required: true, message: '组名称不能为空', trigger: 'blur' },]"
            >
              <el-input v-model="form.groupName" size="small"></el-input>
            </el-form-item>
            <el-form-item
              label="上级组"
              v-if="titleNum == 2"
              :rules="[
      { required: true, message: '请选中上级组', trigger: 'blur' },]"
            >
              <el-input
                @click.native="showVideoTree = true"
                v-model="form.parentGroupName"
                suffix-icon="el-icon-zoom-in"
              />
            </el-form-item>
            <el-form-item :label="$t('m.REMARKS')">
              <el-input v-model="form.remark" type="textarea" :rows="2" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogStatus=='add'?handleCreate():handleUpdate()"
          size="small"
        >{{$t('m.CONFIRM')}}</el-button>
      </div>
    </el-dialog>
    <!-- 通讯录组选择 -->
    <div class="default-select-tree groupTree" v-show="showTree">
      <el-scrollbar class="tree-scrollbar" wrap-class="tree-scrollbar__wrap">
        <el-tree
          :data="treeData"
          icon-class="el-icon-arrow-right"
          node-key="nid"
          highlight-current
          @check-change="groupCheckChange"
          :filter-node-method="groupFilter"
          check-strictly
          ref="groupTree"
        ></el-tree>
      </el-scrollbar>
      <el-button @click="commitGroup">{{$t('m.CONFIRM')}}</el-button>
    </div>
    <!-- 视频组选择 -->
    <div class="default-select-tree groupTree" v-show="showVideoTree">
      <el-scrollbar class="tree-scrollbar" wrap-class="tree-scrollbar__wrap">
        <el-tree
          :data="treeDataVideo"
          icon-class="el-icon-arrow-right"
          node-key="nid"
          highlight-current
          @check-change="groupCheckChange"
          check-strictly
          ref="groupVideoTree"
        ></el-tree>
      </el-scrollbar>
      <el-button @click="commitGroup">{{$t('m.CONFIRM')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { dataflow } from '@/api/data'
import { mapGetters } from 'vuex'
import deepClone from '@/utils/clone'
export default {
  props: {
    groupDialog: Boolean,
  },
  components: {},
  data() {
    return {
      dialogStatus: 'add',
      treeData: [],
      treeDataVideo: [],
      tableData: [],
      form: {},
      showTree: false,
      showVideoTree: false,
      value: '',
      groupIndex: '',
      dialogAdd: false,
      titleNum: '1',
      groupTypeMap: [
        { key: 'organ', value: '普通组' },
        { key: 'dispatchgroup', value: '调度组' },
        { key: 'clustergroup', value: '集群组' },
        { key: 'dynamicgroup', value: '动态编组' },
      ],
      searchKey: '',
      currentNid: '',
      curuentItem: {},
    }
  },
  computed: {
    ...mapGetters({
      userGroupTreeDataAll: 'userGroupTreeDataAll',
      groupMap: 'groupMap',
      videoGroupMap: 'videoGroupMap',
      videoGroupTreeData: 'videoGroupTreeData',
    }),
  },
  watch: {
    searchKey(val) {
      if (this.titleNum == 1) this.$refs.tree.filter(val)
      else this.$refs.videoTree.filter(val)
    },
  },
  methods: {
    //数据重构
    FilterTreeData() {
      let obj = [
        {
          children: [],
          id: '998',
          label:
            this.$i18n.locale == 'en-US'
              ? this.$t('m.ADDRESS_BOOK_GROUPING')
              : '通讯录分组',
          nid: '998',
          obj: { groupID: null, groupName: '通讯录分组' },
          parentID: '',
          type: 'group',
        },
      ]
      obj[0].children = this.userGroupTreeDataAll
      this.treeData = deepClone(obj)
      let videoGroup = [
        {
          children: [],
          id: '999',
          label: '视频分组',
          nid: '999',
          obj: { groupID: null, groupName: '视频分组' },
          parentID: '',
          type: 'videogroup',
        },
      ]
      videoGroup[0].children = this.videoGroupTreeData
      this.treeDataVideo = deepClone(videoGroup)
    },
    //sercher
    filterTable() {},
    // 点击树节点
    nodeClick(data) {
      this.currentNid = data.nid
      this.curuentItem = data.obj
      this.tableData = []
      if (data.children.length > 0) {
        if (this.titleNum == 1) {
          data.children.forEach((e) => {
            this.tableData.push(e.obj)
          })
        } else {
          data.children.forEach((e) => {
            if (e.type == 'videogroup') this.tableData.push(e.obj)
          })
        }
      }
    },
    //切换左侧栏目
    handleGoto(type) {
      this.titleNum = type
      this.$refs.videoTree.filter()
      this.tableData = []
      this.searchKey = ''
      this.curuentItem = {}
    },
    //关闭
    handleClose() {
      this.$emit('update:groupDialog', false)
    },
    //视频分组过滤
    videoGroupFilter(value, data, node) {
      if (!value) {
        return data.type === 'videogroup'
      }
      return data.type === 'videogroup' && data.label.includes(value)
    },
    // 组选择框改变
    groupCheckChange(node, checked) {
      if (checked) {
        if (!this.formData.group.some((g) => g.groupID === node.obj.groupID)) {
          this.formData.group.push({
            groupID: node.obj.groupID,
            groupName: node.obj.groupName,
          })
        }
      } else {
        let index = this.formData.group.findIndex(
          (g) => g.groupID === node.obj.groupID
        )
        if (idnex !== -1) this.formData.group.splice(index, 1)
      }
    },
    // 监听鼠标事件
    clickEvent(e) {
      var box = document.getElementsByClassName(
        `default-select-tree groupTree`
      )[0]
      if (box && !box.contains(e.target)) {
        this.showTree = false
      }
    },
    //组选择确定
    commitGroup() {
      if (this.titleNum == 1) {
        let group = this.$refs.groupTree.getCurrentNode()
        if (group == undefined || group == null) {
          this.$message.warning('请选择组')
          return
        }
        this.form.parentID = group.id
        this.form.parentGroupName = group.label
        this.showTree = false
      } else {
        let group = this.$refs.groupVideoTree.getCurrentNode()
        if (group == undefined || group == null) {
          this.$message.warning('请选择组')
          return
        }
        this.form.parentID = group.id
        this.form.parentGroupName = group.label
        this.showVideoTree = false
      }
    },
    //搜索框事件触发过滤
    treeGroupFilter() {
      if (this.titleNum == 1) this.$refs.tree.filter(this.searchKey)
      else this.$refs.videoTree.filter(this.searchKey)
    },
    groupFilter() {},
    // tree过滤
    filterNode(value, data, node) {
      if (!value) return true
      return data.label.includes(value) && data.type == 'group'
    },
    handleAddClose() {
      this.dialogAdd = false
    },
    //打开新增
    handleAdd() {
      this.form = {}
      if (
        this.curuentItem == '' ||
        this.curuentItem == null ||
        JSON.stringify(this.curuentItem) == '{}'
      ) {
        return this.$message.warning('请先选择组')
      }
      //videoGroupID
      this.titleNum == 1
        ? (this.form.parentID = this.curuentItem.groupID)
        : (this.form.parentID = this.curuentItem.videoGroupID)
      this.form.parentGroupName = this.curuentItem.groupName
      this.dialogAdd = true
      this.dialogStatus = 'add'
    },
    //打开编辑
    handleModify(item) {
      this.dialogStatus = 'update'
      this.form = { ...item }
      if (this.titleNum == 1) {
        const parent = this.groupMap.get(this.form.parentID)
        if (parent) {
          this.form.parentGroupName = parent.label
        }
      } else {
        const videoParent = this.videoGroupMap.get(this.form.parentID)
        if (videoParent) {
          this.form.parentGroupName = videoParent.label
        }
      }
      this.dialogAdd = true
    },
    //创建
    handleCreate() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let _this = this
          let obj
          if (this.titleNum == 1) {
            obj = {
              request: {
                '@id': '100000',
                '@type': 'GroupAdd',
                fullName: this.form.fullName,
                groupName: this.form.groupName,
                parentID:
                  this.form.parentID == undefined ? '' : this.form.parentID,
                groupType: this.form.groupType,
                keyNumber: this.form.keyNumber,
                remark: this.form.remark,
              },
            }
          } else {
            obj = {
              request: {
                '@id': '100000',
                '@type': 'VideoGroupAdd',
                groupName: this.form.groupName,
                parentID:
                  this.form.parentID == undefined ? '' : this.form.parentID,
                remark: this.form.remark,
                videoGroupID: this.form.videoGroupID,
              },
            }
          }
          dataflow(obj).then((res) => {
            _this.dialogAdd = false
            if (res.status == 200) {
              setTimeout(() => {
                if (this.titleNum == 1) {
                  _this.$store.dispatch('initUser')
                } else {
                  _this.$store.dispatch('initVideo')
                }
                _this.tableData = []
                setTimeout(() => {
                  _this.FilterTreeData()
                }, 1000)
              }, 500)
            }
          })
        }
      })
    },
    //修改
    handleUpdate() {
      let _this = this
      let obj
      if (this.titleNum == 1) {
        obj = {
          request: {
            '@id': '100000',
            '@type': 'GroupMod',
            groupID: this.form.groupID,
            fullName: this.form.fullName,
            groupName: this.form.groupName,
            parentID: this.form.parentID,
            groupType: this.form.groupType,
            keyNumber: this.form.keyNumber,
            remark: this.form.remark,
          },
        }
      } else {
        obj = {
          request: {
            '@id': '100000',
            '@type': 'VideoGroupMod',
            videoGroupID: this.form.videoGroupID,
            groupName: this.form.groupName,
            parentID: this.form.parentID,
            remark: this.form.remark,
          },
        }
      }
      dataflow(obj).then((res) => {
        _this.dialogAdd = false
        if (res.status == 200) {
          setTimeout(() => {
            if (this.titleNum == 1) {
              _this.$store.dispatch('initUser')
            } else {
              _this.$store.dispatch('initVideo')
            }
            _this.tableData = []
            setTimeout(() => {
              _this.FilterTreeData()
            }, 1000)
          }, 500)
        }
      })
    },
    //删除
    handledel() {
      let _this = this
      let delArr = this.$refs.table.store.states.selection
      if (delArr.length == 0) {
        this.$message.warning(this.$t('m.tip.DEL_EMPTY_TIP'))
        return
      }
      this.$confirm(this.$t('m.tip.DELECT_TIP'), this.$t('m.tip.TIPS'), {
        confirmButtonText: this.$t('m.CONFIRM'),
        cancelButtonText: this.$t('m.CANCEL'),
        type: 'warning',
      }).then(() => {
        if (this.titleNum == 1) {
          delArr.forEach((e) => {
            let obj = {
              request: {
                '@id': '100000',
                '@type': 'GroupDel',
                groupID: e.groupID,
              },
            }
            dataflow(obj).then((res) => {
              setTimeout(() => {
                _this.$store.dispatch('initUser')
                _this.tableData = []
                setTimeout(() => {
                  _this.FilterTreeData()
                }, 600)
              }, 500)
            })
          })
        } else {
          delArr.forEach((e) => {
            let obj = {
              request: {
                '@id': '100000',
                '@type': 'VideoGroupDel',
                videoGroupID: e.videoGroupID,
              },
            }
            dataflow(obj).then((res) => {
              setTimeout(() => {
                _this.$store.dispatch('initVideo')
                _this.tableData = []
                setTimeout(() => {
                  _this.FilterTreeData()
                }, 600)
              }, 500)
            })
          })
        }
      })
    },
  },
  mounted() {
    this.$nextTick(() => {
      document.addEventListener('click', this.clickEvent, true)
    })
    this.FilterTreeData()
  },
  destroyed() {
    document.removeEventListener('click', this.clickEvent, true)
  },
}
</script>

<style lang="scss" scoped>
/deep/.distribution-dialog {
  width: 900px;
  height: 500px;
  background-color: #1a4969;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .aside {
    color: white;
    margin: 0 auto;
    line-height: 24px;
    margin-left: 10px;
    .aside-part {
      height: 60%;
      border-radius: 5px;
      margin-left: 3px;
      writing-mode: vertical-lr;
      text-align: center;
      cursor: pointer;
    }
    .checked {
      background-color: #172a47;
    }
  }
  .el-dialog__close {
    color: #fff;
  }

  .el-dialog__header {
    .el-dialog__title {
      color: #fff;
    }
  }

  .el-dialog__body {
    padding: 0;
    height: 400px;
    .search-input {
      margin-bottom: 10px;
      .el-input__inner {
        background-color: #1a4969;
        color: #fff;
      }
    }
  }
  .el-dialog__footer {
    background-color: #1a4969;
    padding: 5px 30px;
    height: 45px;
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      &:hover {
        background-color: #409eff;
      }
    }
  }

  .default-scrollbar {
    width: 100%;
    height: calc(100% - 20px);
    background-color: #172a47;
  }

  .default-scrollbar__wrap {
    width: auto;
    overflow-x: hidden;
    margin-right: -20px !important;
  }

  .el-tree-node__content {
    height: 34px;
    cursor: default;

    &:hover {
      background-color: #172a47;
      border: 1px solid #d0cdcd;
      color: white;
    }
  }

  .el-tree-node.is-current > .el-tree-node__content {
    // background-color: #00b2ee;
    // #6BB5E6
    background-color: #6bb5e6;
    color: #000;
  }

  .el-container {
    height: 100%;

    .aside-left {
      width: 200px !important;
      height: 100%;
      margin-left: 10px;

      .el-tree {
        background-color: #172a47;
        color: #fff;
      }
    }

    .el-main {
      height: 100%;
      padding-top: 0px;

      .el-table {
        background-color: #1a4969;
        height: 425px;

        td {
          border-bottom: 1px solid #2e67a8;
        }

        tr:hover > td {
          background-color: #2f6b8d;
        }

        .table-herder-custom {
          background-color: #2e67a8;
          color: #fff;
        }

        .table-cell-custom {
          background-color: #172a47;
          color: #fff;

          .el-link {
            color: #fff;
            margin-left: 20px;

            span {
              font-size: 10px;
            }

            &:hover {
              color: #06f7bb;
            }
          }
        }

        .el-table__body tr.current-row > td {
          background: #00b2ee !important;
        }
      }

      .el-table::before {
        height: 0;
      }
    }
  }

  .aside-right {
    height: 425px;
    margin-right: 10px;
    margin-bottom: 20px;
    border: 1px solid #00b2ee;
    border-radius: 5px;
    background-color: #172a47;
  }

  .right-scrollbar {
    width: 100%;
    height: calc(100% - 40px);
  }

  .right-scrollbar__wrap {
    width: auto;
    // height: 110%;
    overflow-x: hidden;
  }

  .input-text {
    height: 36px;
    line-height: 36px;
    display: flex;
    align-items: center;

    .el-input {
      margin-left: 3px;

      .el-input__inner {
        background-color: #172a47;
        color: #fff;
      }
    }

    .el-button {
      height: 28px;
      padding: 0 10px;
      margin: 0 2px;
    }
  }

  .distribution-item {
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin: 3px 2px;
    color: #fff;
    display: flex;

    div {
      width: 50%;
      height: 36px;
      line-height: 36px;
      text-align: center;
    }
  }

  .distribution-item:hover {
    background-color: #a4cedb;
  }

  .distribution-commit {
    text-align: center;
    margin-top: 5px;

    .el-button {
      height: 30px;
      width: 80px;
      background-color: #172a47;
      color: #fff;
      padding: 0;
    }

    .el-button:hover {
      background-color: #409eff;
    }
  }
  .el-dialog__wrapper {
    position: absolute;
    height: 100%;
    .inner-dialog {
      background-color: #1a4969;
      height: 100%;
      margin-top: 0 !important;
      margin-bottom: 0px;
      opacity: 0.96;
      .el-dialog__footer {
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
      .back-to-list {
        color: #fff;
        height: 22px;
        width: 22px;
        margin-left: 15px;
        cursor: pointer;
      }
      .el-form {
        .el-form-item__label {
          color: #fff;
        }
        .el-form-item__content {
          width: 40%;
        }
        .el-input__inner,
        .el-textarea__inner {
          background-color: #1a4969;
          color: #fff;
          // width: 40%;
        }
        .group-item {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          .svg-icon {
            width: 19px;
            height: 19px;
            margin-right: 5px;
            cursor: pointer;
          }
          .add-label {
            color: #fff;
            cursor: pointer;
          }
          .el-input__inner {
            width: 240px;
          }
          &.add {
            margin-left: -1px;
            font-size: 13px;
            label {
              margin-left: 3px;
            }
            .valid-rule {
              color: #f56c6c;
              margin-left: 20px;
              font-size: 12px;
            }
          }
          .set-defaultNo {
            margin-left: 10px;
            font-style: oblique;
            .el-radio__label {
              font-size: 10px;
            }
          }
        }
      }
      .el-upload {
        .el-button {
          color: #fff;
          background-color: #1a4969;
          margin-top: 10px;
          &:hover {
            background-color: #00b2ee;
          }
        }
      }
    }

    .trial-box {
      position: absolute;
      left: calc(50% - 100px);
      top: calc(50% - 50px);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 5px;
      width: 200px;
      height: 100px;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      .el-row {
        color: #fff;
      }
      .trial-loading {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        -webkit-animation: loading 1.1s infinite linear;
        animation: loading 1.2s infinite linear;
        @-webkit-keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
      .el-button {
        width: 70px;
        color: #fff;
        background-color: #1a4969;
        margin-top: 10px;
        &:hover {
          background-color: #00b2ee;
        }
      }
      .form-item-group {
        margin: 5px 0;
        .svg-button {
          height: 32px;
          display: flex;
          align-items: center;
          margin-bottom: 18px;
        }
      }
    }
  }
  .default-select-tree {
    right: 30px;
    position: absolute;
    bottom: 15%;
    height: 400px;
    width: 220px;
    background-color: #155175;
    border: 1px solid #fff;
    border-radius: 7px;
    z-index: 999999;
    .tree-scrollbar {
      border-radius: 7px;
      width: 100%;
      height: calc(100% - 40px);
      // background-color: #172a47;
      background-color: #155175;

      .el-tree {
        background-color: #155175 !important;
        color: #fff;
        .el-tree-node__content {
          height: 34px;
          cursor: default;
          background-color: #155175;
          &:hover {
            background-color: #616d70;
          }
        }
        .el-tree-node.is-current > .el-tree-node__content {
          background-color: #00b2ee !important;
          color: #ffffff;
        }
        .el-checkbox__input.is-checked {
          .el-checkbox__inner {
            background-color: green;
            border-color: green;
          }
        }
      }
    }
    .tree-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
      margin-right: -20px !important;
    }
    text-align: center;
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      padding: 9px 0px;
      &:hover {
        background-color: #409eff;
      }
    }
  }

  @media screen and (max-width: 1024px) {
    width: 800px;
    height: 450px;

    .el-dialog__body {
      height: 400px;
    }

    .aside-left {
      width: 150px !important;
    }

    .el-main {
      padding-right: 5px;
      padding-left: 5px;
    }

    .el-table {
      height: 380px !important;
    }

    .el-tree-node__label {
      font-size: 12px;
    }

    .aside-right {
      height: 380px;
    }

    .distribution-item {
      font-size: 12px;
    }
  }
}
</style>